<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="/taglibs.jsp"%>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
	content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="${ctx}/resources/semanticui/semantic.min.css"rel="stylesheet" type="text/css" />
<link href="${ctx}/resources/apps.css" rel="stylesheet" type="text/css" />
<link href="${ctx}/resources/imgup/css/common.css" rel="stylesheet"type="text/css" />
<link href="${ctx}/resources/imgup/css/index.css" rel="stylesheet"type="text/css" />
<title>上传个人头像</title>
<style type="text/css">
#miniImg {
	width: 200px;
	height: 200px;
	margin-left: 35px;
}
</style>
</head>
<body>
	<div class="ui segment" id="n-page">
		&nbsp;<br> &nbsp;<br>
		<h3 class="ui attached header" id="list-title">上传个人头像</h3>
		&nbsp;<br> &nbsp;<br> 请从手机图库选择个人头像，让候选人更方便找到你。&nbsp;<br>&nbsp;<br>
		&nbsp;<br>
		<form class="ui form" action="${ctx}/wechat/employer/uploadFile.do"
			enctype="multipart/form-data" method="post">
			<div class="z_photo upimg-div clear" style="padding:0px;padding-top:10px;">
				<section class="z_file fl" style="margin-left: 10%">
					<c:if test="${hr.imgUrl!=null}">
						<img class=" floated mini ui image" id="miniImg" src="${ctx}/rs/${hr.imgUrl}">
						<input type="file" name="file" id="file" class="file" value="" accept="image/jpg,image/jpeg,image/png,image/bmp"  />
					</c:if>
					<c:if test="${hr.imgUrl==null}">
						<img src="${ctx}/resources/imgup/img/a11.png" class="add-img" >
						<input type="file" name="file" id="file" class="file" value="" accept="image/jpg,image/jpeg,image/png,image/bmp" />
					</c:if>
				</section>
			</div>
			<aside class="mask works-mask">
			<div class="mask-content">
				<p class="del-p ">您确定要删除吗？</p>
				<p class="check-p"><span class="del-com wsdel-ok">确定</span><span class="wsdel-no">取消</span></p>
			</div>
			</aside>
			<input type="hidden" name="hrId" id="hrId" value="${hr.id}" />
			<br />
			<button class="fluid ui button" type="submit" style="paddint-top:10px;">下一步</button>
		</form>
	</div>


	<script src="${ctx}/resources/jweixin-1.0.0.js"></script>
	<script src="${ctx}/resources/semanticui/jquery-2.1.4.min.js"></script>
	<script src="${ctx}/resources/semanticui/semantic.js"type="text/javascript"></script>
	<script src="${ctx}/resources/imgup/js/imgUp.js"></script>
	<script type="text/javascript">
		wx.config({
			debug : false,
			appId : "${config.appid}",
			timestamp : ${config.currenttimestamp},
			nonceStr : "${config.nonceStr}",
			signature : "${config.signatureStr}",
			jsApiList : [ 'checkJsApi', 'onMenuShareTimeline',
					'onMenuShareAppMessage', 'onMenuShareQQ',
					'onMenuShareWeibo', 'chooseImage', 'previewImage',
					'uploadImage', 'downloadImage', 'closeWindow' ]
		});

		var uploadUrl = '${ctx}/wechat/employer/uploadFile.do';
		var handler = {
			activate : function() {
				$(this).addClass('active').siblings().removeClass('active');

				if ($(this).attr('id') == 'uploadPhoto') {
					$(this).addClass('disabled');
		/* 			wx.chooseImage({
								count : 1,
								success : function(res) {
									var localId = res.localIds[0];
									wx
											.uploadImage({
												localId : localId,
												isShowProgressTips : 1,
												success : function(res) {
													var serverId = res.serverId;
													//uploadUrl += "?resId=" + serverId;
													//location.href = uploadUrl;
													headImgId = res.serverId;
													//$(".user-photo").attr("src",serverId);
													$("#miniImg").attr("src",
															serverId);
													// 下载图片接口
													wx
															.downloadImage({
																serverId : res.serverId, // 需要下载的图片的服务器端ID，由uploadImage接口获得
																isShowProgressTips : 1, // 默认为1，显示进度提示
																success : function(
																		res) {
																	var localId = res.localId; // 返回图片下载后的本地ID
																	//获取本地图片接口
																	wx
																			.getLocalImgData({
																				localId : localId, // 图片的localID
																				success : function(
																						res) {
																					var localData = res.localData; // localData是图片的base64数据，可以用img标签显示
																				}
																			});
																}
															});

													uploadUrl += "?resId="
															+ serverId;
													location.href = uploadUrl;
												  $("#nextStep").show();
													 $("#uploadPhoto").hide(); 
												}
											});

								}
							}); */

				}
			}
		};

		$("#miniImg").change(function(){	 
			var idFile = $(this).attr("id");
			var file = document.getElementById(idFile);
			var imgContainer = $(this).parents(".z_photo"); //存放图片的父亲元素
			var fileList = file.files; //获取的图片文件
			var input = $(this).parent();//文本框的父亲元素
			var imgArr = [];
			//遍历得到的图片文件
			var numUp = imgContainer.find(".up-section").length;
			var totalNum = numUp + fileList.length;  //总的数量
			if(fileList.length > 1 || totalNum > 1 ){
				alert("上传图片数目不可以超过1个，请重新选择");  //一次选择上传超过5个 或者是已经上传和这次上传的到的总数也不可以超过5个
			}
			else if(numUp < 1){
				fileList = validateUp(fileList);
				for(var i = 0;i<fileList.length;i++){
				 var imgUrl = window.URL.createObjectURL(fileList[i]);
				     imgArr.push(imgUrl);
				 var $section = $("<section class='up-section fl loading'>");
				     imgContainer.prepend($section);
				 var $span = $("<span class='up-span'>");
				     $span.appendTo($section);
				
			     var $img0 = $("<img class='close-upimg'>").on("click",function(event){
					    event.preventDefault();
						event.stopPropagation();
						$(".works-mask").show();
						delParent = $(this).parent();
					});   
					$img0.attr("src","../../../../resources/imgup/img/a7.png").appendTo($section);
			     var $img = $("<img class='up-img up-opcity'>");
			         $img.attr("src",imgArr[i]);
			         $img.appendTo($section);
			     var $p = $("<p class='img-name-p'>");
			         $p.html(fileList[i].name).appendTo($section);
			     var $input = $("<input id='taglocation' name='taglocation' value='' type='hidden'>");
			         $input.appendTo($section);
			     var $input2 = $("<input id='tags' name='tags' value='' type='hidden'/>");
			         $input2.appendTo($section);
			      
			   }
			}
			setTimeout(function(){
	             $(".up-section").removeClass("loading");
			 	 $(".up-img").removeClass("up-opcity");
			 },450);
			 numUp = imgContainer.find(".up-section").length;
			if(numUp >= 1){
				$(this).parent().hide();
			}
		});
		var headImgId;
		$(document).ready(function() {
			wx.ready(function() {
				$('#uploadPhoto').on('click', handler.activate);
				$("#nextStep").click(function() {
					location.href = "${ctx}/wechat/employer/success.page";
				});
			});

		});
	</script>
</body>
</html>